<template>
  <div>
    <baseContainer title="基础弹框">
    <x-button type="primary" @click="handleClick">点击message提示</x-button>
  </baseContainer>
  <baseContainer title="不同状态">
    <x-button type="success" @click="handleClick1">success</x-button>
    <x-button type="danger" @click="handleClick2">danger</x-button>
    <x-button type="warning" @click="handleClick3">warning</x-button>
    <x-button type="info" @click="handleClick4">info</x-button>
  </baseContainer>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,onMounted } from 'vue'
import Message from '../../packages/message'
import transfer from '../../packages/transfer'
import baseContainer from './baseContainer.vue'
export default defineComponent({
  components: {Message,transfer,baseContainer},
  setup () {
    const handleClick = () => { 
      Message({
        message: 'message',
        type: 'info',
        center: true,
      })
    }
    const show = ref(false)
    onMounted(() => { 
      show.value = true
    })
    const handleClick1 = () => { 
      Message({
        message: 'success',
        type: 'success',
        center: true,
      })
    }
    const handleClick2 = () => { 
      Message({
        message: 'danger',
        type: 'danger',
        center: true,
      })
    }
    const handleClick3 = () => { 
      Message({
        message: 'warning',
        type: 'warning',
        center: true,
      })
    }
    const handleClick4 = () => { 
      Message({
        message: 'info',
        type: 'info',
        center: true,
      })
    }
    return {handleClick,show,handleClick1,handleClick2,handleClick3,handleClick4}
  }
})
</script>

<style scoped lang="scss">
.x-transition-fade-enter-from, // 出现时的class
.x-transition-fade-leave-to {
  // 影藏时的class
  transform: translate(0, 20px);
  opacity: 0;
}
.x-transition-fade-enter-active,
.x-transition-fade-leave-active {
  transition: all 0.4s;
}
.x-transition{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(.3,.3,.3,.3);
  .x-transfer{
    background: white;
    padding: 20px;
  }
}
</style>